<script setup>
import { ref, onMounted,computed,nextTick } from 'vue';
import { HomeFilled, Search, User } from '@element-plus/icons-vue'
import 'fullpage.js/dist/fullpage.css'
import VueFullPage from 'vue-fullpage.js'
import { useTokenStore } from '@/store/token';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'

// 用户信息
const tokenStore = useTokenStore()
const router = useRouter()

// 验证登录状态
const isLogin = computed(() => tokenStore.token && tokenStore.token.length > 0)

// 跳转到用户页面的函数
const goToMyPage = () => {
  // 先检查登录状态
  if (!isLogin.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  // 检查用户信息是否存在
  if (!tokenStore.user) {
    ElMessage.error('用户信息不存在')
    return
  }

  const userRole = Number(tokenStore.user.identity)

  // 检查角色是否有效
  if (userRole === undefined || isNaN(userRole)) {
    ElMessage.error('用户角色无效')
    return
  }

  const rolePages = {
    0: '/member',
    1: '/store',
    2: '/wholesaler',
    3: '/factory'
  }

  const targetPath = rolePages[userRole]
  if (!targetPath) {
    ElMessage.error('无效的用户角色')
    return
  }

  // 使用 nextTick 确保 DOM 更新后再跳转
  nextTick(() => {
    router.push(targetPath)
      .catch(err => {
        console.error('路由跳转失败:', err)
        ElMessage.error('页面跳转失败')
      })
  })
}

// 在组件挂载后初始化用户信息
onMounted(() => {
  if (isLogin.value && !tokenStore.user) {
    // 获取用户信息的逻辑
  }
})

// 点击搜索按钮的函数
const goToSearch = () => {
    // 先检查登录状态
  if (!isLogin.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  router.push('/search')
}
</script>

<template>
    <div class="home-nav">
      <div class="logo">
        <router-link to="/">
          <img src="@/assets/images/logo.png" alt="">
        </router-link>
      </div>
      <div class="icon-container">
        <router-link to="/" class="icon-link">
          <el-icon><HomeFilled /></el-icon>
        </router-link>
        
        <div class="icon-link"  @click="goToSearch">
          <el-icon><Search /></el-icon>
        </div>
        
        <div class="icon-link" @click="goToMyPage">
          <el-icon><User /></el-icon>
        </div>
      </div>
      <div class="right"></div>
    </div>
  
  <full-page ref="fullpage" :options="{ scrollingSpeed: 1000 }">
    <!-- 第一屏：主banner -->
    <div class="section">
      <div class="info-section1">
        <!-- <img :src="bannerList[0].imgUrl" alt=""> -->
        <div class="platform-info">
            <h1>欢迎加入 桃禧</h1>
            <p>我们是一家专业的服装采购商贸平台，在这里我们提供方便的服装交易服务，优秀的服装品质保障</p>
            <RouterLink v-if="!isLogin"
              class="login-btn"
              :to="{path: '/login'}">
              立即登录
            </RouterLink>
        </div>
      </div>
    </div>
    
    <!-- 第二屏：平台信息和商品展示 -->
    <div class="section">
      <div class="info-section2">
        <div class="platform-info">
          <h1>品牌故事</h1>
          <p>这里是品牌介绍文字，讲述品牌理念和特色...</p>
        </div>
        
        <div class="product-preview">
          <h2>提供服务</h2>
          <div class="product-list">
            <!-- <div class="product-item" v-for="item in productList" :key="item.id">
              <div class="product-img">
                <img :src="item.imgUrl" alt="">
              </div>
              <div class="product-info">
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
              </div>
            </div> -->
            <div class="product-item" >
              <div class="product-img">
                <img src="@/assets/images/1.jpg" alt="">
              </div>
              <div class="product-info">
                <h3>线下收银</h3>
                <p>我们提供便捷的线下支付方式，在各大合作门店均可轻松完成交易。此外，平台提供的在线收银也能够满足您一条龙服务的需求</p>
              </div>
            </div>
            <div class="product-item" >
              <div class="product-img">
                <img src="@/assets/images/2.jpg" alt="">
              </div>
              <div class="product-info">
                <h3>线上采购</h3>
                <p>我们平台拥有各种服装种类，界面简洁，操作便捷，您只需轻松点击几下，即可选购心仪的商品。我们还提供安全可靠的支付系统和快速的物流配送服务，确保您的购物体验无忧无虑。</p>
              </div>
            </div>
            <div class="product-item" >
              <div class="product-img">
                <img src="@/assets/images/3.jpg" alt="">
              </div>
              <div class="product-info">
                <h3>品质保证</h3>
                <p>品质是我们的生命线。从原厂商的严格筛选，到生产过程的精细把控，每一个环节都经过严格的审查。为您提供最优质的穿着体验，让您买得放心。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </full-page>
</template>

<style lang='scss' scoped>

.home-nav {
  position: fixed;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between; // 让子元素在水平方向两端分布，为logo左对齐和icon居中布局做准备  align-items: center;
  align-items: center;
  padding: 20px;
  $start-color: rgba(0, 0, 0, 0.4); // 起始颜色为透明度0.8的黑色，可根据需要调整透明度值
  $end-color: rgba(0, 0, 0, 0); // 结束颜色为完全透明的黑色
  background: linear-gradient(to bottom, $start-color, $end-color);

  .logo{
  display: flex;
  height: 60px;
  margin-left: 0px;
}

  .icon-container{
    display: flex;
    justify-content: center;
    margin-right: 50px;
    align-items: center;
    gap: 20px; // 图标之间的间距
    .icon-link {
      font-size: 28px;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
      padding: 8px; // 增加可点击区域
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 4rem;

      &:hover {
        opacity: 0.8;
    }
    }
  }
}

.banner-item {
  width: 100%;
  height: 100vh;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply; /* 设置混合模式为正片叠底，可根据实际效果调整其他模式如screen等 */
    opacity: 0.8; /* 可适当降低图片透明度以更好地展示文本，可根据实际情况调整 */
  }
}

// 自定义导航点样式
:deep(.fp-right) {
  right: 20px;
  
  #fp-nav ul li a span {
    background: #fff;
  }
}
.info-section1 {
  padding: 40px;
  // max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url('@/assets/images/background.jpg'); /* 将这里替换为你实际的图片路径或URL */
  background-size: contain; /* 让背景图覆盖整个区域，根据需求可调整为其他值如contain等 */
  background-position: center; /* 让背景图在区域内居中显示，可根据需求调整 */
  background-repeat: no-repeat; /* 防止背景图重复平铺 */
  
  .platform-info {
    text-align: center;
    margin-bottom: 60px;
    
    h1 {
      font-size: 36px;
      margin-bottom: 20px;
    }
    
    p {
      font-size: 16px;
      line-height: 1.6;
      color: #666;
      margin-bottom: 20px;
    }
    .login-btn{
      font-size: 24px;
    }
  }
}
.info-section2 {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  .platform-info {
    text-align: center;
    margin-bottom: 60px;
    
    h1 {
      font-size: 36px;
      margin-bottom: 20px;
    }
    
    p {
      font-size: 16px;
      line-height: 1.6;
      color: #666;
    }
    
  }
  
  .product-preview {
    h2 {
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
    }
    
    .product-list {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      
      .product-item {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
        
        &:hover {
          transform: translateY(-5px);
        }
        
        .product-img {
          height: 200px;
          overflow: hidden;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .product-info {
          padding: 15px;
          text-align: center;
          
          h3 {
            font-size: 18px;
            margin-bottom: 8px;
          }
          
          p {
            color: #666;
          }
        }
      }
    }
  }
}

// 添加滚动提示
.scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  color: #fff;
  
  &::after {
    content: '↓';
    font-size: 24px;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
</style>